{% extends "base.html" %}

{% block content %}


<h2>Projects Available</h2>
<div class="form_container clearboth">
    {% for project in projects %}
    <form action="/signup" method="post" id="id_join_group_form_{{project.key.id}}">
        <input type="hidden" name="id_project" value="{{ project.key.id }}">
        <li>
            <label>{{project.name}}</label>
            <input type="submit" value="Join" class="ui-button_large">
        </li>
    </form>
    {% endfor %}
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $(function() {
            $("input:submit, button" ).button();
        });

        $('form:[id^=id_join_group_form_]').submit(function(event) {
            event.preventDefault();
            var $form = $( this ),
            url = $form.attr('action'),
            id_project = $form.find( 'input[name="id_project"]' ).val(),
            data = $form.serialize();
            $.ajax({
                type: 'POST',
                url: url,
                dataType: 'json',
                data: data,
                success: function(data) {

                }
            });
        });

    });
</script>

{% endblock %}
